// 基于axios封装网络请求,每个人想法不同
import theAxios from 'axios'
import router from '@/router'
import { Notify } from 'vant'
import { getToken } from '@/utils/token'
// 新建一个新的axios实例
const axios = theAxios.create({
  baseURL: 'http://geek.itheima.net', // 基地址
  timeout: 20000 // 20s无响应超时
})

// 添加请求拦截器统一携带headers
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 目标：统一携带token
  // 判断本地有token再携带， 判断具体api/index.js里如果没有携带Authorization，就添加上去
  // 未定义叫undefined, null具体值你得赋予才叫空
  // ?. 可选链操作符，如果前面对象没有length,整个表达式返回undefined
  // 如果getToken()在原地有值Token字符串,才能调用length获取长度
  //getToken后面的？
      if ( getToken()?.length > 0 && config.headers.Authorization === undefined) {
          config.headers.Authorization = `Bearer ${getToken()}`
          console.log(config)
      }
    return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。 2xx, 3xx就进入这里
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。如4xx,5xx
  // 对响应错误做点什么
  console.dir(error)
  // console.log(this) // undefined
  // 只有401代表身份过期
  if (error.response.status === 401) {
        // 不能使用this.$router(因为this不是vue组件对象无法调用$router)
        Notify( {type: 'warning', message: '身份已过期'})
        router.replace('/login')
  }
  return Promise.reject(error);
});


// 封装方便网络请求工具切换 导致的参数不同问题(axios和ajax)
export default ({ url, method = 'GET', params = {}, data = {}, headers = {} }) => {
  return axios({
    url,
    method,
    params,
    data,
    headers
  })
}
